import VuePropTypes from 'ant-design-vue/es/_util/vue-types'
import { Drawer, Button } from 'ant-design-vue'

const CustomDrawerProps = {
  title: VuePropTypes.string,
  visible: VuePropTypes.bool,
  confirmLoading: VuePropTypes.bool,
  cancelText: VuePropTypes.string.def('取消'),
  okText: VuePropTypes.string.def('确定'),
  fixedFooter: VuePropTypes.bool.def(true),
  width: VuePropTypes.number.def(560),
  hiddenDefaultFooter: VuePropTypes.bool.def(false)
}

const CustomDrawer = {
  props: CustomDrawerProps,
  render () {
    return <Drawer
      visible={this.visible}
      width={this.width}
      title={this.title}
      onClose={() => this.$emit('cancel')}
      bodyStyle={{ paddingBottom: this.fixedFooter ? '80px' : null }}
    >
      {this.$slots.default}
      {
        this.hiddenDefaultFooter ? null
        : <div style={
          this.fixedFooter
          ? {
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }
          : {
            textAlign: 'right'
          }
        }>
          <Button style={{ marginRight: '8px' }} onClick={() => this.$emit('cancel')}>{this.cancelText}</Button>
          <Button loading={this.confirmLoading} type="primary" onClick={() => this.$emit('ok')}>{this.okText}</Button>
        </div>
      }
    </Drawer>
  }
}

export default CustomDrawer
